*{
  font-family: Avenir, sans-serif; font-size: 1em; text-align: center;
  margin: 0px; padding: 0px; box-sizing: border-box;
}
.conteneur-grid{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(3,minmax(80px,1fr));
  border: 2px solid red;
  background-color: #DDD;
  margin: 10px;
}
.conteneur-grid > div{
  padding: 20px 0px;
  border: 1px dashed black;
}
.g1{
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    background-color: #ED8; /*Jaune*/
}
.g2{
    grid-column: 1 / 2;
    grid-row: 1 / 4;
    background-color: #4DA; /*Vert*/
}
.g3{
    grid-column: 1 / 4;
    grid-row: 3 / 4;
    background-color: #4AD; /*Bleu*/
}
.g4{
    grid-column: 3 / 4;
    grid-row: 1 / 4;
    background-color: #A4D;/*Violet*/
}
.g5{
    background-color: #C24;/*Rouge*/
}
.grille2 .g1{z-index: 4;}
.grille2 .g2{z-index: 3;}
.grille2 .g3{z-index: 2;}
.grille2 .g4{z-index: 1;}